頭貼搞定了那就剩下使用者姓名與密碼了!!

這個做法跟之前的方式一樣，updateProfile去更新會員的資料，有填寫才要更新，所以也有一個if判斷式在前面。

以下是今天寫的內容，使用方式不變，所以就不多加贅述了。

function Member(){
    const user = auth.currentUser
    const [displayName, setDisplayName] = useState("")
    const [password, setPassword] = useState("")
    const [photoURL,setPhotoURL] = useState(null)
    const [imageUpload, setImageUpload] = useState(null)
    const previewImg = imageUpload? URL.createObjectURL(imageUpload) : ""
    const [errorMessage, setErrorMessage] = useState(false)
    function onSubmit(){
        if(previewImg){
            const imagesRef = ref(storage, 'user-images/' + user.uid);
            const metadata = {
                contentType: imageUpload.type,
            };
            uploadBytes(imagesRef, imageUpload,metadata).then((snapshot) => {
                return getDownloadURL(snapshot.ref)
            }).then((url)=>{
                setPhotoURL(url)
            });
            updateProfile(user, {
                photoURL
            })
        }
        if(displayName){
            updateProfile(user, {
                displayName
            }).then(()=>{
                setDisplayName("")
            })
        }else{
             setErrorMessage("必填")
        }
        if(password){
            updateProfile(user, {
                password
            }).then(()=>{
                setPassword("")
            })
        }
    }
    return (
    <main data-page="-" className="memberPage">
        <section className="info_section">
            <div className="container">
                <div className="wrap animatable fadeInUp">
                    <div className="card">
                        <div className="card_upper">
                            <div className="imgwrap">
                                <img src={user.photoURL&&previewImg?previewImg:user.photoURL} alt=""/>
                            </div>
                            <div className="name">{user.displayName}</div>
                        </div>
                        <ul className="card_lower">
                            <li>
                                <div className="info_title">帳號</div>
                                <div className="info_conent">{user.email}</div>
                            </li>
                        </ul>
                        <div className="editbtnwrap">
                            <label className="btn_edit" htmlFor="upload" >上傳照片</label>
                            <input type="file" accept="image/*" id="upload" 
                                onChange={(e)=>setImageUpload(e.target.files[0])}
                            />
                        </div>
                    </div>
                    <form action="">
                        <div className="form-group">
                            <label className="form-label" htmlFor="name">使用者名稱<span>*</span></label>
                            <input className="form-input" id="name" type="text" placeholder="請輸入名稱" value={displayName} onChange={(e)=>{setDisplayName(e.target.value)}}/>
                            <small>{errorMessage}</small>
                        </div>
                        <div className="form-group">
                            <label className="form-label" htmlFor="password">修改密碼</label>
                            <input className="form-input" id="password" type="text" placeholder="請輸入密碼" value={password} onChange={(e)=>{setPassword(e.target.value)}}/>
                        </div>
                        <div className="btnwrap">
                            <a className="btn blue" href="#" onClick={onSubmit}>儲存變更 <span></span></a>
                        </div>
                    </form>

                </div>
            </div>
        </section>
    </main>
    )
}

今天是幸運的一天，沒有碰到錯誤!!